<!--
 * @Author: 番茄炒蛋蛋 wzh15802755802@163.com
 * @Date: 2024-05-23 15:42:22
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-05-24 16:46:14
 * @FilePath: \vue-element-admin-master-2\src\views\assignment\assignmentList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="contaner">
    <div class="selectTop">
      <div class="allType">
        <el-select v-model="type_id" placeholder="全部分类">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
        <el-select v-model="status" placeholder="全部状态">
          <el-option
            v-for="item in statusLists"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
        <el-input
          v-model="title"
          placeholder="请输入内容"
          clearable
          size="medium"
        ></el-input>
        <div class="serch" @click="search">搜索</div>
      </div>

      <div class="addType" @click="addTypeShow = true">
        <i class="el-icon-plus"></i> 新增类别
      </div>
    </div>

    <el-table
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
      :header-cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
    >
      <el-table-column prop="title" label="任务名称" />
      <el-table-column prop="type_title" label="任务类型" />
      <el-table-column prop="price" label="发放助学金" />
      <el-table-column label="任务图" style="min-width: 110px">
        <template slot-scope="scope">
          <div class="file_url" style="width:100px;height:100px;text-align:center">
            <img :src="scope.row.file_url" style="width:100%" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status == "1" ? "有效" : "无效" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务时间" style="min-width: 130px">
        <template slot-scope="scope">
          <div class="time">
            <span>开始时间：{{ timeStamp2String(scope.row.create_time * 1000, 7) }}</span>
            <span>结束时间：{{ timeStamp2String(scope.row.end_time * 1000, 7) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作">
        <template slot-scope="scope">
          <!-- <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button> -->
          <el-button @click="edit(scope.row)" type="warning" size="small"
            >编辑</el-button
          >
          <el-button @click="del(scope.row.id)" type="danger" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增管理员分类 -->
    <el-dialog
      title="新增类别"
      :visible.sync="addTypeShow"
      v-dialogDrag
      width="600px"
    >
      <el-form>
        <el-form-item label="账号类别" :label-width="formLabelWidth">
          <el-input v-model="addTitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号状态" :label-width="formLabelWidth">
          <el-radio v-model="addStatus" label="1">有效</el-radio>
          <el-radio v-model="addStatus" label="2">无效</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            addTypeShow = false;
            addTitle = '';
            addStatus = '1';
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="addType">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑管理员分类 -->
    <el-dialog
      title="修改类别"
      :visible.sync="editTypeShow"
      v-dialogDrag
      width="600px"
    >
      <el-form>
        <el-form-item label="账号类别" :label-width="formLabelWidth">
          <el-input v-model="editTitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号状态" :label-width="formLabelWidth">
          <el-radio v-model="editStatus" label="1">有效</el-radio>
          <el-radio v-model="editStatus" label="2">无效</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            editTypeShow = false;
            editTitle = '';
            editStatus = '';
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="editType">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { timeStamp2String } from "@/utils/time";
import {
  list_renwutype,
  list_renwu,
  list_admintype,
  create_admintype,
  update_admintype,
  delete_admintype,
} from "@/api/user";

export default {
  data() {
    return {
      timeStamp2String, //时间戳转时间的函数
      type_id:'',//分类id
      status: "", //分类状态
      typeList:[],//分类列表
      statusLists: [
        { id: "1000", title: "全部" },
        { id: "0", title: "无效" },
        { id: "1", title: "有效" },
      ],
      title: "", //搜索名称
      tableData: [], //表格内容，管理员分类列表

      //弹窗
      formLabelWidth: "120px",
      //新增
      addTypeShow: false, //新增类别弹窗
      addTitle: "", //新增类别名称
      addStatus: "1", //新增类别状态
      //编辑
      editId: "", //要修改的类别id
      editTypeShow: false, //新增类别弹窗
      editTitle: "", //新增类别名称
      editStatus: "", //新增类别状态
    };
  },
  created() {
    // this.getTypeLists();
    this.getRenwuType();
    this.getRenwuList();
  },
  methods: {
    //获取任务分类
    getRenwuType(){
        list_renwutype().then(res=>{
            const data = res.retRes
            this.typeList = data ;
            this.typeList.unshift({
                id:0,
                status:1,
                title:'全部分类'
            })
        })
    },
    //获取任务列表
    getRenwuList(){
        list_renwu({
            type_id:this.type_id,
            title:this.title,
            status:this.status,
            page:this.page,
            page_size:this.page_size
        }).then(res=>{
            const data = res.retRes;
            this.tableData = [];
            this.tableData.push(...data);
        })
    },
    //获取管理员分类列表
    getTypeLists() {
      list_admintype({
        title: this.title,
        status: this.status == "1000" ? "" : this.status,
      }).then((res) => {
        if (res.retInt == 1) {
          const data = res.retRes;
          this.tableData = [];
          this.tableData.push(...data);
          console.log(this.tableData);
        }
      });
    },
    //根据筛选条件搜索
    search() {
      this.getTypeLists();
    },
    //添加类别确认按钮
    addType() {
      console.log(this.addTitle, this.addStatus);
      if (this.addTitle === "") {
        this.$message({
          message: "请填写账号类别",
          type: "warning",
        });
      } else {
        create_admintype({
          title: this.addTitle,
          status: this.addStatus,
        }).then((res) => {
          if (res.retInt == 1) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.addTitle = "";
            this.addStatus = "1";
            this.getTypeLists();
            this.addTypeShow = false;
          }
        });
      }
    },
    //编辑管理员分类
    edit(e) {
      this.editId = e.id;
      this.editTitle = e.title;
      this.editStatus = String(e.status);
      this.editTypeShow = true;
    },
    //编辑管理员分类
    editType() {
      if (this.editTitle === "") {
        this.$message({
          message: "请填写账号类别",
          type: "warning",
        });
      } else {
        update_admintype({
          id: this.editId,
          title: this.editTitle,
          status: this.editStatus,
        }).then((res) => {
          if (res.retInt == 1) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.editTitle = "";
            this.editStatus = "";
            this.getTypeLists();
            this.editTypeShow = false;
          }
        });
      }
    },
    del(id) {
      this.$confirm("是否确认删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
            delete_admintype({
            id: id,
            }).then((res) => {
            if (res.retInt == 1) {
                this.$message({
                type: "success",
                message: "删除成功!",
                });
                this.getTypeLists();
            }
            });
        })
        .catch(() => {
            this.$message({
            type: "info",
            message: "已取消删除",
            });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.contaner {
  padding: 20px;
}
.selectTop {
  display: flex;
  // align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  // margin: 30px;
  // width: 100%;
  .allType {
    display: flex;
    align-items: center;
    .el-input {
      width: 200px;
    }
    div {
      margin-right: 20px;
    }
  }
  .serch {
    user-select: none;
    width: 80px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    background: #1e9fff;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
  }
  .serch:active {
    opacity: 0.8;
  }
  .addType {
    padding: 0 10px;
    height: 38px;
    line-height: 38px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    border: 1px solid transparent;
    background-color: #ffb800;
    user-select: none;
  }
  .addType:active {
    opacity: 0.8;
  }
}
.time{
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>
